<template>
  <div class="meetings">
    <el-row class="search">
      <div style="display: flex;line-height: 40px;">
        <div class="icons">
          <i class="iconfont icon-huiyi"></i>
        </div>
        <span class="icone">周期会议</span>
      </div>
      <div class="button1">
        <!--      按钮、搜索-->
        <div class="rightBtn">
          <el-button>新增</el-button>
        </div>
        <div>
          <el-input
              v-model="input2"
              class="w-50 m-2"
              placeholder=""
              :suffix-icon="Search"
          />
        </div>
      </div>

    </el-row>
  </div>
<!--  表格数据-->
  <div style="padding:20px;" >
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'12px',
              color:'#000000',
              background:'#F1F1F1',

            }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="会议名称" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="会议地点" width="120" />
          <el-table-column property="address" label="召集人" />
          <el-table-column property="address" label="联系人" />
          <el-table-column property="address" label="创建人" />
          <el-table-column property="address" label="创建日期" />
          <el-table-column property="address" label="状态" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="今天" name="day">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'12px',
              color:'#000000',
              background:'#F1F1F1',
            }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="会议名称" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="会议地点" width="120" />
          <el-table-column property="address" label="召集人" />
          <el-table-column property="address" label="联系人" />
          <el-table-column property="address" label="创建人" />
          <el-table-column property="address" label="创建日期" />
          <el-table-column property="address" label="状态" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="本周" name="week">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'12px',
              color:'#000000',
              background:'#F1F1F1',
            }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="会议名称" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="会议地点" width="120" />
          <el-table-column property="address" label="召集人" />
          <el-table-column property="address" label="联系人" />
          <el-table-column property="address" label="创建人" />
          <el-table-column property="address" label="创建日期" />
          <el-table-column property="address" label="状态" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="本月" name="mounth">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'12px',
              color:'#000000',
              background:'#F1F1F1',
            }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="会议名称" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="会议地点" width="120" />
          <el-table-column property="address" label="召集人" />
          <el-table-column property="address" label="联系人" />
          <el-table-column property="address" label="创建人" />
          <el-table-column property="address" label="创建日期" />
          <el-table-column property="address" label="状态" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="本季" name="fourth">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'12px',
              color:'#000000',
              background:'#F1F1F1',
            }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="会议名称" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="会议地点" width="120" />
          <el-table-column property="address" label="召集人" />
          <el-table-column property="address" label="联系人" />
          <el-table-column property="address" label="创建人" />
          <el-table-column property="address" label="创建日期" />
          <el-table-column property="address" label="状态" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="本年" name="yaer">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'12px',
              color:'#000000',
              background:'#F1F1F1',
            }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="会议名称" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="会议地点" width="120" />
          <el-table-column property="address" label="召集人" />
          <el-table-column property="address" label="联系人" />
          <el-table-column property="address" label="创建人" />
          <el-table-column property="address" label="创建日期" />
          <el-table-column property="address" label="状态" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-row>
      </el-tab-pane>

    </el-tabs>

  </div>

</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import { Search } from '@element-plus/icons-vue'

const d = reactive({
  s:true,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData:[],
  dialogFormVisible:false,
  insertLend:false,
  //类别集合
  classes:[],

});

// 搜索框
const input2 = ref('')

// 默认点击进来就是全部页面
const activeName = ref('all')


</script>

<style scoped>
@import url("../../../public/imgsY/icon/iconfont.css");

*{
  margin: 0px;
  padding: 0px;
}
.el-row{
  padding: 5px 0px;
}

/deep/ .el-tabs__header {
  margin-bottom: 0px;
}

.search{
  border: 1px solid silver;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.icons{
  width: 50px;
  height: 50px;
  background: dodgerblue;
  text-align: center;
  line-height: 50px;
  /*圆角*/
  border-radius: 40px;
  margin-left: 20px;
}

/*会议*/
.icon-huiyi {
  color: white;
  font-size: 24px;
  line-height: 50px;
}

.icone{
  padding-left: 15px;
  line-height: 50px;
}
.button1{
  display: flex;
}
.el-button{
  background: dodgerblue;
  color: white;
  margin-right: 20px;
}



</style>